<div flex layout="row" layout-align="start center">
  <div hide-xs class="mat-subtitle-1 pad-left pad-right push-bottom-none">
    Chart Theme:
  </div>
  <mat-form-field>
    <mat-select
      [(value)]="selectedTheme"
      (valueChange)="selectChartTheme($event)"
    >
      <mat-option *ngFor="let theme of themes" [value]="theme">
        {{ theme }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
<td-chart [style.height.px]="300" [themeName]="themeSelector.selected$ | async">
  <td-chart-dataset
    [source]="[
      ['Electronics', 150, 80],
      ['Toys', 130, 122],
      ['Grocery', 150, 80],
      ['Appliances', 120, 120],
      ['Automotive', 150, 80],
      ['Sports', 120, 120]
    ]"
  ></td-chart-dataset>
  <td-chart-toolbox
    [show]="true"
    [right]="30"
    [top]="10"
    [feature]="{
      dataView: {
        readOnly: true,
        title: 'View Data',
        lang: ['Data View', 'Turn Off', 'Refresh']
      },
      dataZoom: { title: { zoom: 'Zoom', back: 'Back' } },
      magicType: {
        type: ['line', 'bar', 'stack', 'tiled'],
        title: { line: 'Line', bar: 'Bar', stack: 'Stack', tiled: 'Tiled' }
      },
      restore: { title: 'Restore' }
    }"
  >
    <ng-template tdViewDataFormatter>
      <table td-data-table>
        <thead>
          <tr td-data-table-column-row>
            <th td-data-table-column>Category</th>
            <th td-data-table-column>{{ config.series[0].name }}</th>
            <th td-data-table-column>{{ config.series[1].name }}</th>
          </tr>
        </thead>
        <tbody>
          <ng-container
            *ngFor="
              let item of [
                'Electronics',
                'Toys',
                'Grocery',
                'Appliances',
                'Automotive',
                'Sports'
              ];
              let i = index
            "
          >
            <tr td-data-table-row>
              <td td-data-table-cell>{{ item }}</td>
              <td
                td-data-table-cell
                *ngIf="[150, 130, 150, 120, 150, 120] as firstSeries"
              >
                {{ firstSeries[i] }}
              </td>
              <td
                td-data-table-cell
                *ngIf="[80, 122, 80, 120, 80, 120] as secondSeries"
              >
                {{ secondSeries[i] }}
              </td>
            </tr>
          </ng-container>
        </tbody>
      </table>
    </ng-template>
  </td-chart-toolbox>
  <td-chart-tooltip [trigger]="'item'">
    <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
      <ng-container *ngIf="params">
        <div layout="row" layout-align="start center">
          <mat-icon>
            <span [style.color]="params.color">people</span>
          </mat-icon>
          <span class="mat-caption pad-left-sm">
            {{ params.seriesName ? params.seriesName : params.name }}:
            {{ params.value }}
          </span>
        </div>
      </ng-container>
    </ng-template>
  </td-chart-tooltip>
  <td-chart-x-axis
    [show]="true"
    [position]="'bottom'"
    [type]="'category'"
    [boundaryGap]="true"
  ></td-chart-x-axis>
  <td-chart-y-axis
    [show]="true"
    [type]="'value'"
    [position]="'right'"
    [max]="300"
    [splitLine]="{ lineStyle: { type: 'dotted' } }"
  ></td-chart-y-axis>
  <td-chart-series td-bar [name]="'Today'"></td-chart-series>
  <td-chart-series
    td-bar
    [name]="'Yesterday'"
    [markLine]="{ data: [{ name: 'Average', value: 30, xAxis: 1, yAxis: 30 }] }"
  ></td-chart-series>
</td-chart>
